import { useAtomValue } from "jotai";
import { NavLink } from "react-router";
import clsm from "@/lib/utils/clsm";
import LogIcon from "@/assets/images/log-files.png?jsx";
import HistoryIcon from "@/assets/images/history.png?jsx";
import OrderIcon from "@/assets/images/order.png?jsx";
import ProgramIcon from "@/assets/images/program-mode.png?jsx";
import AlertIcon from "@/assets/icons/alert.svg?jsx";
import { isAdminAtom } from "@/store/user";

const paths = [
  {
    name: "日志",
    path: "/setting/log",
    icon: <LogIcon className="size-6" />,
    admin: true,
  },
  {
    name: "历史数据",
    path: "/setting/history",
    icon: <HistoryIcon className="size-6" />,
  },
  {
    name: "订单",
    path: "/setting/order",
    icon: <OrderIcon className="size-6" />,
  },
  // {
  //   name: "程序库",
  //   path: "/setting/program",
  //   icon: <ProgramIcon className="size-6" />,
  // },
  {
    name: "限值警报",
    path: "/setting/alert",
    icon: <AlertIcon className="size-6 text-yellow-500" />,
  },
];

export default function SettingAside() {
  const isAdmin = useAtomValue(isAdminAtom);
  return (
    <aside className="h-full min-w-0 flex-none basis-[270px] bg-[#161616]">
      <ul className="pt-6">
        {paths
          .filter((item) => isAdmin || !item.admin)
          .map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                clsm("flex gap-x-2 px-6 py-2", isActive && "bg-zinc-600")
              }
            >
              {item.icon}
              <span>{item.name}</span>
            </NavLink>
          ))}
      </ul>
    </aside>
  );
}
